/**
 * Created by dllo on 16/8/29.
 */

$(".start_4").on("touchstart",function () {
    $(".start").hide();
    $(".start_l").show();
    // window.location.assign("index1.html");
})

$(".start_5").on("touchstart",function () {
    $(".shuoming").show();
})

$(".sm2").on("touchstart",function () {
    $(".shuoming").hide();
})

$(".start_l2").on("touchstart",function () {
    $(".start_l").hide();
    $("#canvas").show();
    $(".s_btn").show();
    startgame();
})


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//屏幕宽高
var SCREEN_WIDTH = document.documentElement.clientWidth;
var SCREEN_HEIGHT = document.documentElement.clientHeight;

canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;

function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

//标记动画是否执行
var start = false;
var nums = 0;
var speed = 0;
var timer1 = null;
var a = 1;

function startgame() {
    loading({
        game_bg: "./img/game_bg.png",
        game_bg1: "./img/game_bg1.png",
        car_1: "./img/car_1.png",
        car_2: "./img/car_2.png",
        car_enemy: "./img/car_enemy.png",
        car_enemy_left: "./img/car_enemy_left.png",
        car_enemy_right: "./img/car_enemy_right.png",
        obs: "./img/obs.png"
    },{
        complete: main
    })
}




function check(obj1, obj2) {
    if (Math.abs(obj1.x + obj1.w/2 - (obj2.x + obj2.w/2)) <= obj1.w/2 + obj2.w/2 && Math.abs(obj1.y + obj1.h/2 - 30 - (obj2.y + obj2.h/2)) <= obj1.h/2 - 30 + obj2.h/2){
        return true;
    }else{
        return false;
    }
}

var timer2 = null;
var b = 30;

function main(obj) {
    //创建小车
    var carImg = obj.car_1;
    var car = {
        img: carImg,
        w: carImg.width/2,
        h: carImg.height/2,
        x: SCREEN_WIDTH/2 - carImg.width/4,
        y: SCREEN_HEIGHT - carImg.height*1.05
    }
    //创建桩子
    var carEns = [];
    function carEn(obj,num) {
        this.img = obj;
        this.w = this.img.width/2;
        this.h = this.img.height/2;
        this.x = rand(canvas.width/12,canvas.width - canvas.width/5);
        this.y = -this.h;
        this.speed = speed;
        this.nums = num;
    }
    //创建白车
    var carEnss = [];
    function carEnn(obj,num) {
        this.img = obj;
        this.w = this.img.width/2;
        this.h = SCREEN_HEIGHT*0.14505;
        this.x = rand(canvas.width/12,canvas.width - canvas.width/5);
        this.y = -this.h;
        this.speed = speed;
        this.nums = num;
        this.bool = true;
    }
    carEnn.prototype.draw1 = function () {
        ctx.drawImage(this.img,this.x,this.y,this.w,this.h);
    }
    carEnn.prototype.move1 = function () {
        this.y += this.speed;
    }
    carEnn.prototype.canClear1 = function () {
        if (this.y >= SCREEN_HEIGHT){
            return true;
        }else{
            return false;
        }
    }

    //画障碍物
    carEn.prototype.draw = function () {
        ctx.drawImage(this.img,this.x,this.y,this.w,this.h);
    }
    //障碍物动起来
    carEn.prototype.move = function () {
        this.y += this.speed;
    }
    //障碍物超出屏幕清除
    carEn.prototype.canClear = function () {
        if (this.y >= SCREEN_HEIGHT){
            return true;
        }else{
            return false;
        }
    }
    //红绿灯和倒计时
    function light() {
        clearInterval(timer1);
        timer1 = setInterval(function () {
            $(".s_btn5").attr("src","./img/light_"+ a +".png");
            a++;
            if (a == 4){
                a = 1;
                clearInterval(timer1);
                $(".s_btn6").animate({
                    opacity: 0
                },600)
                $(".s_btn5").animate({
                    opacity: 0
                },600,function () {
                    $(this).hide();

                    //倒计时
                    clearInterval(timer2);
                    timer2 = setInterval(function () {
                        b--;
                        $(".s_btn9").text(b);
                        if (b == 0){
                            var numbers = drawAll(false);
                            start = false;
                            clearInterval(timer2);
                            if (numbers >= 30){
                                $("#canvas").hide();
                                $(".s_btn").hide();
                                $("#end_success").show();
                            }else{
                                $("#canvas").hide();
                                $(".s_btn").hide();
                                $("#end_fail").show();
                            }

                        }
                    },1000)
                })
                start = true;
                drawAll(true);
            }

        },1000)
    }
    //红绿灯和倒计时
    light();

    var timer = null;
    var bool = false;
    var Y = 0;
    function drawAll(start) {
        ctx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);

        $(".s_btn3").on("touchstart",function () {
            $(this).off("touchstart").hide();
            $(".s_btn4").show();
            bool = true;
        })

        $(".s_btn4").on("touchstart",function () {
            $(this).off("touchstart").hide();
            $(".s_btn3").show();
            bool = false;
        })

        if (bool){
            Y+=7;
            car.img = obj.car_2;
            speed = 7;
            for(var i = 0; i < carEns.length; i++){
                carEns[i].speed = speed;
            }
            for(var i = 0; i < carEnss.length; i++){
                carEnss[i].speed = speed;
            }
        }else {
            Y+=3;
            car.img = obj.car_1;
            speed = 3;
            for(var i = 0; i < carEns.length; i++){
                carEns[i].speed = speed;
            }
            for(var i = 0; i < carEnss.length; i++){
                carEnss[i].speed = speed;
            }
        }

        if (Y >= SCREEN_HEIGHT){
            Y = 0;
        }
        //创建障碍物
        if (Y % 250 == 0){
            var carenemy = new carEn(obj.obs,1);
            carEns.push(carenemy);
        }
        if (Y % 190 == 0){
            var carenemy1 = new carEnn(obj.car_enemy,5);
            carEnss.push(carenemy1);
        }


        //画背景
        if (b > 29.5){
            ctx.drawImage(obj.game_bg1,0,Y,SCREEN_WIDTH,SCREEN_HEIGHT);
        }else {
            ctx.drawImage(obj.game_bg,0,Y,SCREEN_WIDTH,SCREEN_HEIGHT);
        }
        ctx.drawImage(obj.game_bg,0,-SCREEN_HEIGHT+Y,SCREEN_WIDTH,SCREEN_HEIGHT);
        
        //画障碍物
        for(var i = 0; i < carEns.length; i++){
            var carenemy = carEns[i];
            carenemy.draw();
            carenemy.move();
            if (carenemy.canClear()){
                //记录分数
                nums += carEns[i].nums;
                carEns.splice(i,1);
                i--;
            }

        }
        //画白车
        for(var i = 0; i < carEnss.length; i++){
            var carenemy1 = carEnss[i];
            carenemy1.draw1();
            carenemy1.move1();
            if (carenemy1.canClear1()){
                nums += carEnss[i].nums;
                carEnss.splice(i,1);
                i--;
            }
        }
        var arr = [obj.car_enemy,obj.car_enemy_left,obj.car_enemy_right];
        var rand1 = rand(0,2);
        for(var i = 0; i < carEnss.length; i++){
            if (carEnss[i].bool){
                if (carEnss[i].y >= SCREEN_HEIGHT*0.2){
                    if (rand1 == 0){
                        carenemy1.img = arr[0];
                        carEnss[i].bool = false;
                    }
                    if (rand1 == 1){
                        carenemy1.w = SCREEN_WIDTH*0.17222;
                        carenemy1.h = SCREEN_HEIGHT*0.16105;
                        carenemy1.x -= SCREEN_WIDTH*0.04;
                        carenemy1.img = arr[1];
                        carEnss[i].bool = false;
                    }
                    if (rand1 == 2){
                        carenemy1.w = SCREEN_WIDTH*0.17222;
                        carenemy1.h = SCREEN_HEIGHT*0.16105;
                        carenemy1.img = arr[2];
                        carEnss[i].bool = false;
                    }
                }
            }
        }


        //画小车(图片; 定位x,y轴; 图片的大小w,h)
        ctx.drawImage(car.img,car.x,car.y,car.w,car.h);

        //约束小车边界
        if (car.x < canvas.width/12){
            car.x = canvas.width/12;
            clearInterval(timer);
        }
        if (car.x > canvas.width - canvas.width/5){
            car.x = canvas.width - canvas.width/5;
            clearInterval(timer);
        }

        //碰撞判断
        for(var i = 0; i < carEns.length; i++){
            if (check(car,carEns[i])){
                start = false;
                clearInterval(timer2);
                //失败切换页面
                $("#canvas").hide();
                $(".s_btn").hide();
                $("#end_fail").show();
            }
        }
        for(var i = 0; i < carEnss.length; i++){
            if (check(car,carEnss[i])){
                start = false;
                clearInterval(timer2);
                //失败切换页面
                $("#canvas").hide();
                $(".s_btn").hide();
                $("#end_fail").show();
            }
        }

        if (start){
            //画布刷新,让赛道动起来
            window.requestAnimationFrame(drawAll);
        }else{
            return nums;
        }

    }
    drawAll();

    $(".start_l2").on("touchstart",function () {
        // ctx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
        clearInterval(timer1);
        b = 30;
        a = 1;
        carEns = [];
        carEnss = [];
        $(".s_btn9").text(b);
        $(".s_btn").show();
        $(".s_btn5").show().css("opacity",1).attr("src","./img/light_"+ a +".png");
        $(".s_btn6").show().css("opacity",1);
        light();

    })

        //向左移动
        $(".s_btn1").on("touchstart",function () {
            event.preventDefault();
            if (start){
                timer = setInterval(function () {
                    car.x--;
                },20)
                $(this).on("touchend",function () {
                    clearInterval(timer);
                })
            }
        })

        //向右移动
        $(".s_btn2").on("touchstart",function () {
            event.preventDefault();
            if (start){
                timer = setInterval(function () {
                    car.x++;
                },20)
                $(this).on("touchend",function () {
                    clearInterval(timer);
                })
            }
        })




}


//付爽

$(".yaoqing").on("touchstart",function(){
    $(".yaoqingup").show();
})
$(".yaoqingup").on("touchstart",function(){
    $(".yaoqingup").hide();
})
$(".paihang").on("touchstart",function(){
    $(".bangdan").show();
})
$(".close").on("touchstart",function(){
    $(".bangdan").hide();
})
$(".end_again").on("touchstart",function(){
    $("#end_fail").hide();
    $(".start_l").show();
})
$(document).on("touchmove",function (e) {
    e.preventDefault();
});
var car_box = $("#zp_car_box");
car_box.height(car_box.width());
var deg = 0;
var timer = null;
// 转盘转动
$("#zp_readyGo").on("touchstart",function () {
    $("#zp_hand").hide();
    function rotate(max) {
        clearInterval(timer);
        timer = setInterval(function () {
            if(deg < 960){
                deg += 1;
            }else{
                deg += 1;
            }
            if(deg % 2 == 0){
                $("#zp_pan").attr("src","img/zhuanpan2.png");
            }else{
                $("#zp_pan").attr("src","img/zhuanpan1.png");
            }
            car_box.css({
                transform : "rotateZ("+ deg +"deg)"
            });
            if (deg > 1080 && deg % 360 >= max){
                clearInterval(timer);
                if(num0 == 0 || num0 == 6 || num0 == 9){
                    $("#yihan").fadeIn(300);
                }else{
                    $("#zhongjiang").fadeIn(300);
                    $("#zj_zp").attr("src","img/win"+ num0 +".png");
                }
            }
        });
    }
    rotate();
    var degArr = [255,225,195,165,135,105,75,45,15,345,315,285];
    var num0 = 0;
    $.ajax({
        url: "zhuanpan_api.php",
        type: "post",
        dataType: "json",
        data:{
            type:"chouJiang"
        },
        success:function (data) {
            if(data.err == 0){
                clearInterval(timer);
                deg = 0;
                num0 = data.prize;
                rotate(degArr[data.prize]);

            }
        }
    })
});

$(".tochooseprize").on("touchstart",function () {
    $("#tochoujiang").hide();
    $("#zhuanpan").show();
    car_box.height(car_box.width());
})
$(".lingjiang_btn").on("touchstart",function(){
    $("#zhongjiang").hide();
    $("#info").show();
})
$(".tianhaole").on("touchstart",function(){
    $("#info").hide();
    $("#submit").show();
})
$(".again2").on("touchstart",function(){
    $("#yihan").hide();
    $(".start_l").show();
})

var json={"北京": ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"] ,
    "天津": ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"] ,
    "河北": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"] ,
    "山西": ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"] ,
    "内蒙古": ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"] ,
    "辽宁": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] ,
    "吉林": ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"] ,
    "黑龙江": ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"] ,
    "上海": ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"] ,
    "江苏": ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"] ,
    "浙江": ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"] ,
    "安徽": ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"] ,
    "福建": ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"] ,
    "江西": ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"] ,
    "山东": ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"] ,
    "河南": ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"] ,
    "湖北": ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"] ,
    "湖南": ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"] ,
    "广东": ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"] ,
    "广西": ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"] ,
    "海南": ["海口", "三亚"] ,
    "重庆": ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"] ,
    "四川": ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"] ,
    "贵州": ["贵阳", "遵义", "安顺", "黔西南", "都匀"] ,
    "云南": ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"] ,
    "西藏": ["拉萨", "林芝", "日喀则", "昌都"] ,
    "陕西": ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"] ,
    "甘肃": ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"] ,
    "青海": ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"] ,
    "宁夏": ["银川", "吴忠"] ,
    "新疆": ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"] ,
    "香港": ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"] ,
    "澳门": ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]};
var provSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
for(key in json){
    var option = document.createElement("option");
    option.innerHTML = key;
    provSelect.appendChild(option);
}
provSelect.onchange = function () {
    // console.log(this.options[this.selectedIndex].innerHTML);
    // 清空city
    citySelect.innerHTML = "";
    var cities = json[this.options[this.selectedIndex].innerHTML];
    // console.log(cities);
    for(var i = 0;i < cities.length;i++){
        var option = document.createElement("option");
        option.innerHTML = cities[i];
        citySelect.appendChild(option);
    }

}



